<template>
  <div class="container mainCon">
    <el-row class="titleBox clearfix">
      <div class="fl">
        <span class="blockTitle">
          <i class="icon iconfont iconfanhui1" @click="goBack"></i
          >{{ companyName }}
        </span>
      </div>
    </el-row>
    <div>
      <el-tabs
        v-model="activeName"
        type="card"
        class="tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="基础信息" name="first">
          <enterprise-detail
            v-if="isShowFirst"
            :ylcompanyId="companyId"
            :ylcompanyName="companyName"
            :uscc="uscc"
          ></enterprise-detail>
        </el-tab-pane>
        <!-- <el-tab-pane label="行政处罚" name="second">
                    <administrative-punishment v-if="isShowSecond"></administrative-punishment>
                </el-tab-pane> -->
        <el-tab-pane label="社会保险" name="third">
          <social-insurance
            v-if="isShowThird"
            :companyId="companyId"
            :companyName="companyName"
            :uscc="uscc"
          ></social-insurance>
        </el-tab-pane>
        <el-tab-pane label="书面审查" name="fourth">
          <written-review
            v-if="isShowFourth"
            :companyId="companyId"
            :companyName="companyName"
            :uscc="uscc"
          ></written-review>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import EnterpriseDetail from '../enterpriseSet/enterpriseDetail.vue'
// import AdministrativePunishment from './administrativePunishment.vue';
import SocialInsurance from './socialInsurance.vue'
import WrittenReview from './writtenReview.vue'

export default {
  name: 'enterpriseData',
  components: {
    EnterpriseDetail,
    // AdministrativePunishment,
    SocialInsurance,
    WrittenReview,
  },
  data() {
    return {
      activeName: 'first',
      companyId: '',
      companyName: '',
      uscc: '',
      isShowFirst: true,
      isShowThird: false,
      isShowFourth: false,
    }
  },
  created() {
    const { companyId, activeName, companyName, uscc } = this.$route.query
    this.activeName = activeName || 'first'
    this.companyId = companyId
    this.companyName = companyName
    this.uscc = uscc
  },
  beforeRouteEnter(to, from, next) {
    const { activeName, companyId, companyName, uscc } = to.query
    next((vm) => {
      vm.activeName = activeName || 'first'
      vm.companyId = companyId
      vm.companyName = companyName
      vm.uscc = uscc
      vm.changeName(vm.activeName)
    })
  },
  methods: {
    handleClick({ name } = tab) {
      this.changeName(name)
    },
    changeName(name) {
      if (name === 'first') {
        this.isShowFirst = true
      } else if (name === 'third') {
        this.isShowThird = true
      } else if (name == 'fourth') {
        this.isShowFourth = true
      }
    },
    goBack() {
      this.$router.push('/home/enterpriseArchives/enterpriseList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/enterpriseArchives/enterpriseList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .mainCon {
    top: 130px;
    padding: 0;
  }
  .titleBox {
    background: #e4ebf1;
    padding: 15px 24px;
    border-bottom: 0;
    margin-bottom: 0;
    .blockTitle {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      line-height: 40px;
      .iconfanhui1 {
        font-size: 20px;
        margin-right: 6px;
        cursor: pointer;
      }
    }
    .code {
      font-size: 14px;
      color: #666;
      margin-left: 30px;
    }
    .goSeeDetail {
      font-size: 14px;
      color: #66b1ff;
      margin-left: 30px;
      cursor: pointer;
    }
  }
  // tab栏切换
  .tabs {
    /deep/ .el-tabs__content {
      background: #fff;
      //   min-height: 600px;
      // padding: 24px;
    }
    /deep/ .el-tabs__header {
      margin: 0;
    }
    /deep/ .el-tabs__nav-scroll {
      overflow: hidden;
      background: #e4ebf1;
      /* margin-top: 10px; */
      padding-top: 15px;
    }
    /deep/ .el-tabs__item.is-active {
      font-size: 14px;
      color: #333;
      background: #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    /deep/ .el-tabs__item {
      color: #333;
      background: #d5e0e9;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    /deep/ .el-tabs__item:first-child {
      margin: 0 4px 0px 24px;
    }
    /deep/ .el-tabs__item {
      margin-right: 4px;
    }
    /deep/ .el-tabs__item:last-child {
      margin-right: 0;
    }
  }
  .topTitle {
    // background: #e4ebf1;
    padding: 24px 24px 0;
    text-align: right;
    > div {
      // background: #e4ebf1;
      // padding:8px 24px;
      border-radius: 5px;
      span {
        font-size: 14px;
        color: #666;
      }
    }
    .editBut {
      height: 32px;
      padding: 0 10px;
      border: 0;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      background: #009588;
      cursor: pointer;
      &:hover {
        background-color: #009588;
        border-color: #009588;
        color: #fff;
        opacity: 0.8;
      }
    }
  }
}

@media all and (min-width: 1360px) and (max-width: 1470px) {
  .container .titleBox {
    padding-bottom: 0;
  }
}
</style>
